IMAGENS E LIGAÇÕES

Esta é a melhor parte! São as ligações de hipermídia que permitem que você navegue pelo mundo colorido do WWW sem se preocupar com endereços, nomes de arquivo, formatos, etc. Imagens podem ser referenciadas por hipertexto, mas também podem ser incluídas na página, tornando-a mais atraente e até mais compreensível.

Esta parte abrange os seguintes tópicos:

• Âncoras remotas
• Âncoras locais
• Imagens internas

Nesta seção, adicionaremos ligações de hipertexto (links) à nossa home page. O texto (ou imagem) que aciona o link e o objeto-alvo do mesmo são chamados de âncoras. Uma âncora é um dos dois lados de um hyperlink (ligação de hipermídia), que consiste de uma âncora-fonte que aponta para o endereço de uma âncora-destino. O destino pode ser qualquer formato de mídia eletrônica (um arquivo HTML, um arquivo de texto, uma imagem, um arquivo de vídeo, etc.)

O elemento <A> marca uma âncora. <A HREF="URL da âncora-destino> define uma âncora-fonte. O texto que for marcado com <A HREF> aparece na página em destaque (geralmente azul e sublinhado, por default, nos browsers mais populares). Se o link for acionado (clicando o mouse sobre o texto marcado), o browser irá buscar o objeto apontado pela URL. Alguns exemplos tornarão a compreensão mais fácil:

Vamos colocar links para o índice Yahoo e o mecanismo de busca WebCrawler no primeiro parágrafo da nossa homepage:

... sugiro que procure no índice do <a href=http://www.yahoo.com>
<B>Yahoo</B></a> ou faça uma busca no
<a href=http://www.webcrawler.com><B>WebCrawler</B></a>.

As localidades acima foram referenciadas através de uma URL absoluta. Podemos também usar URLs relativas. Por exemplo, vamos criar uma ligação para o Home Page deste tutorial, no final da página:

<hr>
<a href="index.html">Volta para Tutorial.</a>
<hr>

Podemos também utilizar outros tipos de URLs como ftp, gopher, etc. Na nossa página-exemplo, criaremos um link de correio eletrônico (URL tipo mailto) para um endereço fictício. Se o link for acionado, deverá aparecer uma janela para envio de correio eletrônico:

Para mais informações entre em contato com
<a href="mailto:dino@raptor.ingen.com>dino@raptor.ingen.com</a>.
(endereço fictício)<br>

Veja o resultado das alterações e teste os links.

[Volta para o início desta página]

É possível tambem usar âncoras para navegar dentro de um documento local ou remoto. <A NAME="nome-da-âncora"> marca uma posição no documento (âncora-destino) que pode ser referenciada, dentro do mesmo documento, por <A HREF="#nome-da-âncora">. No exemplo a seguir, marcaremos as três seções:

<hr>
<h2><a name="periodos"></a>Períodos da Era Mesozóica</h2>
	(...)
<hr>
<h2><a name="lista"></a>Lista de Dinossauros</h2>
	(...)
<hr>
<h2><a name="fontes"></a>Outras Fontes de Informação</h2>

e as chamaremos pelo sumário:

<li><a href="#periodos">Períodos da Era Mesozóica</a>
<li><a href="#lista">Lista de Dinossauros</a>
<li><a href="#fontes">Outras fontes de informação</a>
</ul>

Se quiséssemos referenciar as âncoras acima a partir de outro documento, teriamos apenas que complementá-la com o trecho #nome-da-âncora. Por exemplo:

<a href="../referencias.html#HTML">Guias sobre HTML</a>

acessa o documento ../referencias.html a partir do ponto onde há uma âncora <a name="HTML"></a>. Teste este link! --->Guias sobre HTML.

Âncoras não precisam ser somente páginas HTML. Podem também ser arquivos de imagem, vídeo, arquivos executáveis ou qualquer outra mídia eletrônica. No exemplo abaixo, incluímos uma âncora para uma imagem GIF (jplogo.gif) além de outros apontadores remotos com informações sobre dinossauros.

<p>Se você realmente procura alguma coisa um pouco mais séria sobre
dinossauros, confira o <a href="http://ucmp1.berkeley.edu/expo/dinoexpo.html">
Dinosaur Hall</a>. Se procura imagens e informações sobre o
filme <a href="jplogo.gif">Parque dos Dinossauros</a>, veja
<a href="http://www.efn.org/~billy/">Billy´s Place of Info and
Pictures</a>. Finalmente, se você quer entrar para o clube da
Sabedoria dos Dinossauros e escolher seu dinossauro preferido,
vá para a <a href="http://www.sirius.com/~chaosium/saurin/saurin.html">
Saurintology Page</a>.

Veja o resultado. Teste as âncoras locais clicando, por exemplo, o item "Outras Fontes de Informação" no sumário: a página deve rolar até o final. Clique no texto "Parque dos Dinossauros" para acessar uma imagem GIF local. Crie uma ligação na SUA homepage para este tutorial!

[Volta para o início desta página]

No exemplo anterior, vimos que é possível criar âncoras para referenciar textos e imagens. Neste exemplo, utilizaremos o elemento <IMG>, que permite que imagens referenciadas sejam mostradas dentro da página. O elemento <IMG> possui um argumento obrigatório: SRC="URL da imagem", que informa ao browser onde ele deve buscar o arquivo de imagem.

Os formatos de arquivo de imagem aceitos por todos os browsers são .gif, .xbm e .xpm. O formato GIF, da Compuserve, é o mais popular. Alguns browsers mais recentes suportam também o formato JPEG da Free Software Foundation.

Começaremos colocando no início da nossa página, uma imagem (de um dinossauro, é claro!). Temos um arquivo de imagem formato GIF, no mesmo diretório que o arquivo HTML da nossa homepage, chamado "velociraptor.gif". Para incluí-lo na página, utilizamos <IMG> da forma abaixo.

<center><img src="velociraptor.gif"><br>
<h1>Dinosaurs´ Web</h1></center>
<hr>

Veja o resultado. Experimente substituir velociraptor.gif por outras imagens. Veja o que acontece se você não colocar o <BR> após a chamada da imagem.

Observe também, no exemplo acima, que utilizamos o elemento <CENTER>. <CENTER> faz parte do HTML do Netscape, mas vários outros browsers já o compreendem. Se seu browser suporta <CENTER>, você verá o título e a imagem centrados. Se não suporta, eles serão alinhados pela margem esquerda.

Se a imagem não está no mesmo diretório que a página, temos que informar o caminho (URL relativa) para que possa ser encontrada. Por exemplo:

<img src="stego.gif">

<img src="http://www.dsc.ufpb.brdscicon.gif">

No nosso exemplo, incluiremos um ícone (imagem GIF) dentro da ligação que criamos para retornar ao Sumário. Este ícone então será uma imagem ativa, ou seja, passa a ser um link também. Se voce clicar nela, ela faz alguma coisa.

<hr>
<a href="index.html"><img src="left.gif">
Volta para Tutorial.</a>
<hr>

Antes que vejamos o resultado do parágrafo anterior, vamos adicionar alguns parágrafos com imagens. Além do atributo SRC, <IMG> pode receber um atributo que controla o alinhamento vertical da figura em relação a linha em que está contida. Este atributo é ALIGN=posição, onde posição pode ser top, middle ou bottom (default), que alinha a imagem respectivamente, pelo item mais alto da linha, pelo meio ou pela base do texto. As extensões do Netscape oferecem mais opções de controle de alinhamento. No nosso exemplo, ilustramos os três tipos básicos de alinhamento nos parágrafos abaixo.

<h3>Imagens de Dinossauros</h3>

<p>Este é um <b>Estegosauro</b>: <img src="stego.gif>,
animal do grupo <i>Ornitischia</i> do final do período Jurássico. A
figura do estegossauro foi incluída neste parágrafo sem alinhamento
vertical.

<p>O <b>Triceratops</b> <img src="tricera.gif" align=middle>,
dinossauro do grupo <i>Ornitischia</i> que viveu na America do Norte
no final do período Cretáceo, foi incluído neste parágrafo com
 alinhamento pelo meio da linha.
O <b>Apatossauro</b> (ou brontossauro)
<img src="bronto.gif" align=top> é um dinossauro do grupo
<i>Saurischia</i>, que viveu no período Jurássico. Neste parágrafo
ele foi alinhado com a parte de cima da linha.

<p>Finalmente, esta barata (Arghh!) <a href="barata.gif">
<img src="baratinha.gif" align=middle></a> também foi alinhada
pelo meio (não sei se a barata é dinossauro, mas não resisti em
colocá-la aqui). Se você clicar sobre a barata, receberá uma
barata maior!

Veja e compare os resultados. Veja também mais exemplos sobre recursos de imagens no Guia de Referência.

Com o que foi visto até agora, você já será capaz de criar sua homepage. Se quiser incrementá-la com papel de parede, ícones e outros recursos, siga para a próxima seção!

[Volta para o início desta página]

---

---